<template>
    <dev class="page-container" style="padding: 10px 10px;">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="出售中商品" name="sell">
        </el-tab-pane>
        <el-tab-pane label="仓库中商品" name="warehouse">
        </el-tab-pane>
        <el-tab-pane label="已经售罄商品" name="sellOut"> 
        </el-tab-pane>
        <el-tab-pane label="警戒库存" name="alert">  
        </el-tab-pane>
        <el-tab-pane label="商品回收站" name="recycle">    
        </el-tab-pane>
      </el-tabs>
      <searchTitle ></searchTitle>
      <goodsList :goods-list="goodsData"></goodsList>
      <el-pagination size="small" v-model:page="queryParams.pageNum" 
      v-model:limit="queryParams.pageSize"
      layout="prev, pager, next" :total="total" 
      :current-page="currPageCount" @current-change="handleCurrentChange"/>
    </dev>
</template>

<script setup lang="ts" name="goodsManage">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import searchTitle from "@/views/goods/component/searchTitle.vue"
import goodsList from "@/views/goods/component/goodsList.vue";
import {goodsPageList} from "@/api/goods/goodsManage"

const activeName = ref('sell')
const goodsData = ref([])
const total=ref(0)
const currPageCount=ref(0)
const queryParams = reactive({
	pageSize:10,
	pageNum:1,
	goodsName:null,
  classify:null
})
//点击tabs
function handleClick(value:any){
  console.log(value)
  activeName.value=value
}

function handleCurrentChange(val:any){
  queryParams.pageNum = val
  getRoleList()
}
//分页查询信息
function getRoleList(){
	goodsPageList(queryParams).then(((resp:any)=>{
		console.log(resp)
		goodsData.value = resp.data.records
		console.log(goodsData)
		total.value = resp.data.total
		currPageCount.value = resp.data.current
	}))
};
// 页面加载时
onMounted(() => {
	getRoleList()
});
</script>
<style scoped lang="scss">
.page-container {
    height: 100%;
	background-color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    .pageContent {
        height: calc(100% - 140px);
        flex: 1;
    }
}
</style>